<template>
  <view class="main">
    <header-vue bgColor="transparent" :searchStatus="true">
      <template v-slot:search>
        <view
          class="flex identity"
          @click="onIdentityTypeClick"
          style="justify-content: flex-start; width: 100vw"
        >
          <view>当前身份：</view>
          <view class="flex">
            <text>{{ identityType == 1 ? "技工" : "邻工" }}</text>
            <i class="iconfont icon-jiantou font28 icon-jiantou-xz"></i>
          </view>
        </view>
      </template>
    </header-vue>
    <image :src="IMAGE_URL+'/static/master/my-header-bg.png'" class="bg-box"></image>
    <view class="user">
      <view class="user-edit">
        <view class="edit" @click="onPersonalInfoClick">
          <image
            :src="IMAGE_URL+'/static/master/edit.png'"
            style="width: 36rpx; height: 36rpx"
          />
          <text class="edit-text">编辑</text>
        </view>
        <view class="cut">
          <u-switch
            v-model="orderValue"
            size="18"
            activeColor="#00CE5D"
            inactiveColor="#999999"
          ></u-switch>

          <text class="cut-text">接单</text>
        </view>
      </view>
      <view class="flex start info">
        <image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
        <view>
          <view class="font32 fontbold-500">Hi，王小明</view>
          <view class="address font24">手机号:1234567890</view>
        </view>
      </view>
      <view class="flex between wallet">
        <view class="item" @click="onWalletClick">
          <view class="price fontbold-500">
            <text class="font24">¥</text>
            <text class="font30">1450.</text>
            <text class="font24">00</text>
          </view>
          <view class="font20">我的余额</view>
        </view>
        <view class="item" @click="onMarginClick">
          <view class="price fontbold-500">
            <text class="font24">¥</text>
            <text class="font30">200.</text>
            <text class="font24">00</text>
          </view>
          <view class="font20">保证金</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view class="font30 title fontbold-500">接单情况</view>
      <view class="flex center between order-item">
        <view v-for="item in getOrderList" :key="item.num" class="flex column">
          <view class="order-item-value">{{ item.num }}</view>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view class="font30 title fontbold-500">常用功能</view>
      <view class="flex center between service-item">
        <view
          v-for="item in getCommonList"
          :key="item.url"
          class="flex column item"
          @click="goPage(item.url)"
        >
          <image :src="IMAGE_URL+item.icon" mode="aspectFit"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="white-box" style="margin-top: 40rpx">
      <view
        v-for="item in list"
        :key="item.url"
        class="flex between list-item"
        @click="goPage(item.url)"
      >
        <view class="flex">
          <image :src="IMAGE_URL+item.icon"></image>
          <view>{{ item.name }}</view>
        </view>
        <i class="iconfont icon-jiantou font28"></i>
      </view>
    </view>

    <!-- 联系电话弹窗 -->
    <contact-popup v-model="showContactPopup" :phone="servicePhone" />
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
import ContactPopup from "./components/contact-popup.vue";

export default {
  data() {
    return {
      showContactPopup: false,
      servicePhone: "4009960297",
      serviceTime: "客服在线时间08:00-22:00",
      IMAGE_URL: appConfig.IMAGE_URL,
      orderValue: false,
      orderList: [
        {
          name: "待接订单数",
          num: 6,
          type: 2,
        },
        {
          name: "今日服务数",
          num: 12,
        },
        {
          name: "今日新增数",
          num: 5,
        },
        {
          name: "查实/拒绝数",
          num: 2,
        },
      ],
      commonList: [
        {
          name: "申请技工",
          type: 1,
          icon: "/static/master/jigong.png",
          url: "1",
        },

        {
          name: "服务管理",

          type: 2,
          icon: "/static/master/fwgl.png",
          url: "/views-master/my/service-management",
        },
        {
          name: "合同管理",
          icon: "/static/master/hetong.png",
          url: "/views-master/my/contract-management",
        },
        {
          name: "我的评价",
          icon: "/static/master/wdpngjia.png",
          url: "/views-master/my/evaluate",
        },
        {
          name: "分享APP",
          icon: "/static/master/fenxiangapp.png",
          url: "/views-master/my/share-app",
        },
      ],

      list: [
        {
          name: "帮助中心",
          icon: "/static/master/bangzhuzhongxin.png",
          url: "/views-master/my/help-center",
        },

        {
          name: "意见反馈",
          icon: "/static/master/yjfk.png",
          url: "/views/mine/feedback",
        },
        {
          name: "联系我们",
          icon: "/static/master/lianxiwomen.png",
        },
        {
          name: "系统设置",
          icon: "/static/master/xtsz.png",
          url: "/views-master/my/sys-set",
        },
      ],
      //身份类型1技工 2 邻工
      identityType: 1,
    };
  },
  components: {
    headerVue,
    ContactPopup,
  },
  computed: {
    getCommonList() {
      return this.commonList.filter((item) => item.type !== this.identityType);
    },
    getOrderList() {
      return this.orderList.filter((item) => item.type !== this.identityType);
    },
  },
  onShow() {
  
  },
  mounted() {
   
  },

  methods: {
    handleSetIdentityType(type) {
      this.identityType = type;
    },
    onIdentityTypeClick() {
      uni.navigateTo({
        url: "/views-master/my/identity-type?type=" + this.identityType,
      });
    },
    onMarginClick() {
      uni.navigateTo({
        url: "/views-master/my/margin",
      });
    },
    onPersonalInfoClick() {
      //跳转钱包页面
      uni.navigateTo({
        url: "/views-master/my/personal-info",
      });
    },
    onWalletClick() {
      //跳转钱包页面
      uni.navigateTo({
        url: "/views-master/my/wallet",
      });
    },
    goPage(url) {
      if (!url) {
        this.showContactPopup = true;
        return false;
      }
      if (url == 1) {
        return false;
      }
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.identity {
  padding: 0 32rpx;
  margin-bottom: 36rpx;
}

.bg-box {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  height: 508rpx;
  width: 100%;
  box-sizing: border-box;
}
.icon-jiantou-xz {
  //旋转
  transform: rotate(90deg);
}
.user {
  padding: 0 240rpx 0 32rpx;
  box-sizing: border-box;
  position: relative;

  width: 100%;
  .user-edit {
    position: absolute;
    right: 32rpx;
    top: 32rpx;
    display: flex;
    align-items: center;
    .edit {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 36rpx;
      .edit-text {
        font-size: 28rpx;
        color: #333333;
        margin-top: 10rpx;
      }
    }

    .cut {
      display: flex;
      flex-direction: column;
      align-items: center;

      .cut-text {
        font-size: 28rpx;
        color: #333333;
        margin-top: 10rpx;
      }
    }
  }
  .info {
    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .address {
      color: $uni-text-color-grey;
      margin-top: 12rpx;
    }
  }

  .wallet {
    margin-top: 36rpx;
    width: 300rpx;

    .item {
      text-align: center;
    }

    .fontbold-500 {
      color: $uni-color-primary;
      margin-bottom: 8rpx;
    }
  }
}

.white-box {
  margin: 0 32rpx 28rpx 32rpx;
  padding: 28rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;

  .title {
    margin-bottom: 28rpx;
    color: #333333;
  }

  .order-item {
    font-size: 24rpx;
    color: #333333;
    padding: 0 32rpx;
    box-sizing: border-box;
    .order-item-value {
      font-weight: 500;
      font-size: 36rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    image {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 12rpx;
    }
  }

  .service-item {
    flex-wrap: wrap;
    font-size: 24rpx;
    color: #333333;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 8rpx;
    }

    .item {
      width: 25%;
      // margin-bottom: 40rpx;
    }
  }

  .list-item {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    margin-top: 46rpx;

    &:nth-child(1) {
      margin: 0;
    }

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }
  }
}
</style>
